<template>
    <div class="coupon">
        <title-header :title="title" :back="true"></title-header>
        <tab :line-width=1>
            <tab-item 
            :selected="index === 0" 
            v-for="(coupon, index) in couponList" 
            @on-item-click="switchover(index)"
            :key="index">{{coupon}}</tab-item>
        </tab>
        <!-- </sticky> -->
        <flexbox v-if="isShow">
            <flexbox-item :span="8">
                <div class="flex-demo cashBox">
                    <input type="text" placeholder ="请输入劵兑换密码"/>
                </div>
            </flexbox-item>
            <flexbox-item>
                <div class="flex-demo cashBt">
                    <x-button mini>兑换</x-button>
                </div>
            </flexbox-item>
        </flexbox>
        <coupon-module></coupon-module>
        <footer>
            <foot></foot>
        </footer>
    </div>
</template>
<script>
import { Tab, TabItem, Sticky, Flexbox, FlexboxItem, XButton} from 'vux'
import TitleHeader from '@/components/titleHeader.vue'
import Foot from '@/components/footer.vue'
import CouponModule from '@/components/couponModule.vue'

export default {
  components: {
    TitleHeader,
    Sticky,
    Tab,
    TabItem,
    Foot,
    Flexbox,
    FlexboxItem,
    XButton,
    CouponModule
  },
  data() {
    return {
      title: '优惠劵',
      couponList: ['优惠劵', '卡包'],
      isShow: true
    }
  },
   methods: {
      switchover (index) {
          this.$store.commit('changeCouponCodeData',index);
          if (index ==1) {
              this.isShow = false
          }else {
              this.isShow = true
          }
      }
  }
}
</script>

<style scoped>
.coupon {
    height: 100%;
    background: #f3f2f2;
}
.cashBox input{
    width: 100%;
    height: 2.1rem;
    padding-left: 10px;
    margin: 10px 0 0 15px;
    border-radius: 6px;
    border: none;
}
.cashBox input:focus{
    outline: none;
}
.cashBt button{
    padding: 3px 24px;
}
.cashBt {
    margin-top: 10px;
    margin-right: 15px !important;
    float: right;
}
</style>
